<template>
  <div class="header-wrapper">
    <div class="city-name">
      <p class="city-content">{{street}}</p>
    </div>
    <div class="search"
         border-radius
         @click="handleSkipSearch">
      <div class="iconfont search-icon">&#xe62b;</div>
      <div class="search-content">搜索商家</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NearbyHeader',
  props: {
    street: {
      type: String
    }
  },
  methods: {
    handleSkipSearch () {
      const path = '/search'
      this.$router.push({ path })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.header-wrapper
  position absolute
  z-index 2
  top 0
  left 0
  right 0
  bottom 0
  height 100px
  background-color $bgcWh
  touch-action none
  padding()
  display flex
  justify-content space-between
  align-items center

  .city-name
    min-width 85px
    color $fzColor
    font-size $fzThird
    height 100px
    position relative
    line-height 100px
    padding-right 30px
    box-sizing border-box

    .city-icon
      font-size $fzFifth
      position absolute
      right 0
      top 0

  .search
    flex 1
    height 60px
    margin-left 56px
    display flex
    padding-left 40px
    box-sizing border-box
    color $graySecond
    line-height 64px

    .search-icon
      font-size $fzThird
      margin-right 32px

    .search-content
      font-size $fzThird

  [border-radius]::before
    border-color $graySecond
    border-radius 60px
</style>
